bootstrap navbar-collapse 的運作原理--javascript

DAY 18

網頁程式自學亂亂來系列第 18 篇

鐵人賽

vinciliu

2014-10-09 23:06:37

15875 瀏覽

分享至

一直很好奇bootstrap navbar-collapse是怎麼做成的，

這個功能很方便，尤其是在不同的3C平台看網頁的時候，

選單會自己縮小到變成一個小按鈕，

希望至少可以理解一些背後的原理，

以後也可以自己做出其他自適應的選單

這是一個普通的bootstrap選單的語法，會隨著瀏覽器解析度變小，而全部縮成一個小按鈕

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Toggle navigation

</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>

</div>
</div>
</nav>

似乎會影響選單改變的應該是這些地方：
１．<button>的class 有一項是collapsed，似乎是讓javascript控制的，因為在bootstrap的css都找不到
２．<button>的data-toggle="collapse"，似乎是讓javascript控制的
３．<button>的data-target 剛好等於選單<div>的id名稱，都叫做bs-example-navbar-collapse-1

而查閱了bootstrap的.js檔案
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js
裡面控制collapsed的程式碼是

/* ========================================================================
* Bootstrap: collapse.js v3.2.0
* http://getbootstrap.com/javascript/#collapse
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */

+function ($) {
'use strict';

// COLLAPSE PUBLIC CLASS DEFINITION
// ================================

var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.transitioning = null

if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.toggle) this.toggle()
}

Collapse.VERSION = '3.2.0'

Collapse.DEFAULTS = {
toggle: true
}

Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}

Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return

var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return

var actives = this.$parent && this.$parent.find('> .panel > .in')

if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
if (hasData && hasData.transitioning) return
Plugin.call(actives, 'hide')
hasData || actives.data('bs.collapse', null)
}

var dimension = this.dimension()

this.$element
.removeClass('collapse')
.addClass('collapsing')dimension

this.transitioning = 1

var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')dimension
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}

if (!$.support.transition) return complete.call(this)

var scrollSize = $.camelCase(['scroll', dimension].join('-'))

this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350)dimension
}

Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return

var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return

var dimension = this.dimension()

this.$elementdimension[0].offsetHeight

this.$element
.addClass('collapsing')
.removeClass('collapse')
.removeClass('in')

this.transitioning = 1

var complete = function () {
this.transitioning = 0
this.$element
.trigger('hidden.bs.collapse')
.removeClass('collapsing')
.addClass('collapse')
}

if (!$.support.transition) return complete.call(this)

this.$element
dimension
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(350)
}

Collapse.prototype.toggle = function () {
thisthis.$element.hasClass('in') ? 'hide' : 'show'
}

// COLLAPSE PLUGIN DEFINITION
// ==========================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

if (!data && options.toggle && option == 'show') option = !option
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') dataoption
})
}

var old = $.fn.collapse

$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse

// COLLAPSE NO CONFLICT
// ====================

$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}

// COLLAPSE DATA-API
// =================

$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)

if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed')
$this$target.hasClass('in') ? 'addClass' : 'removeClass'
}

Plugin.call($target, option)
})

}(jQuery);
</script>

痾．．．有好多看不懂得的函式跟寫法，不過隱約看得出來似乎是移除掉選單原本的class，然後增加另一個class，的感覺喇～～

（有得查了．．．汗）